<template>
	<view class="wrap">
		<view class="item" v-for="(item,index) in formData" :key="index">
			<view class="title-box">
				<view class="title">信息{{index + 1}}</view>
				<view class="del" v-if="index" @click="del(index)">删除</view>
			</view>
			<view class="form">
				<u--form labelPosition="left" :model="item" :rules="rules" labelWidth="120" >
					<u-form-item required label="油品名称" prop="oilId" borderBottom>
						<LSelect v-model="item.oilId" @change="oilChange" :isIndex="true"  :indexNum="index" border="none" dataKey="oilName" dataValue="id" :localdata="oilListData"></LSelect>
					</u-form-item>
					<u-form-item required label="种类" prop="categoryId" borderBottom>
						<LSelect v-model="item.categoryId" border="none" dataKey="typeName" dataValue="id" :localdata="item.categoryListData"></LSelect>
					</u-form-item>
				
					<u-form-item required label="预估桶数" prop="barrelsNumber" borderBottom>
						<u--input v-model="item.barrelsNumber" type="digit" placeholder="请输入" border="none"></u--input>
					</u-form-item>
					<u-form-item label="预估重量（kg）" >
						<u--input v-model="item.weight" type="digit" placeholder="请输入" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
			
		</view>
		
		<view class="btn-box">
			<view class="btn btn1" @click="add()">添加</view>
			<view class="btn btn2" @click="submit()">确认提交</view>
		</view>

	</view>
</template>

<script>
	// oilList
	
	import { log } from "util";
	import { oilList,oilReceiptApplication,receiptShipmentRecordsDetails} from "@/api";
	import LSelect from "@/components/LSelect";
	export default {
		components: {
			LSelect
		},
		data() {
			return {
				serviceLifeList:[
					{id:'1',label:'哈哈哈'}
				],
				oilListData:[], //油品列表
				categoryListData:[],//种类列表
				formData:[
					{
						oilId:'',
						categoryId:'',
						barrelsNumber:'',
						weight:'',
						categoryListData:[],
						deptId:'',
					}
				],
				rules: {
					oilId: {
						type: "string",
						required: true,
						message: "请选择油品名称",
						trigger: ["blur"],
					},
					categoryId: {
						type: "string",
						required: true,
						message: "请选择种类",
						trigger: ["blur"],
					},
					barrelsNumber: {
						type: "string",
						required: true,
						message: "请输入预估桶数",
						trigger: ["blur"],
					},
				},
				params:{}
			};
		},
		computed: {
		},
		onShow() {
			this.getOilList()
		},
		onUnload() { },
		onLoad(params) {
			this.params = params;
			
		},
		methods: {
			getDetails(){
				if(this.params.id){
					receiptShipmentRecordsDetails(this.params.id).then((res) => {
						this.formData = res.data.oilList;
						this.formData.forEach((item,index) => {
							if(item.oilId){
							  this.oilChange({
								  id:item.oilId,
								  index:index
							  })
							}
							
						});
					});
				}
			},
			// 收油列表
			getOilList(){
				let deptId = uni.getStorageSync('deptId') 
				oilList({
					deptId:deptId
				}).then(res => {
					this.oilListData = res.data
					this.getDetails()
				})
			},
			oilChange(e){
				// console.log('oilChange',e)
				let index = e.index
				let data = this.oilListData.find(item => item.id === e.id)
				// console.log(data);
				// this.categoryListData = data.categoryList
				let isTrue = data.categoryList.find(item => item.id == this.formData[index].categoryId)
				if(!isTrue){
				  this.formData[index].categoryId = ''
				}
				this.formData[index].categoryListData = [...data.categoryList];
				// 此处是更新视图操作
				let newData = this.formData[index]
				this.formData.splice(index,1,newData)
				console.log(this.formData);
			},
			add(){
				let data = {
					oilId:'',
					categoryId:'',
					barrelsNumber:'',
					weight:'',
					categoryListData:[],
					deptId:this.params.deptId,
				}
				this.formData.push(data)
			},
			del(index){
				this.$modal("是否确认删除？", () => {
					this.formData.splice(index,1)
					this.$toast("删除成功");	
				});
			},
			
			// 提交
			submit(){
				const isoilId = this.formData.some(item => item.oilId == "" );
				if(isoilId){
					this.$toast("请选择油品");
					return false;
				}
				const iscategoryId = this.formData.some(item => item.categoryId == "" );
				if(iscategoryId){
					this.$toast("请选择种类");
					return false;
				}
				const isbarrelsNumber = this.formData.some(item => item.barrelsNumber == "" );
				if(isbarrelsNumber){
					this.$toast("请输入预估桶数");
					return false;
				}
				let deptId = uni.getStorageSync('deptId')
				this.formData[0].deptId = deptId
				oilReceiptApplication(this.formData).then((res) => {
					this.$toast("提交成功");
					this.$route({
					  type: "back",
					  isDelay: true,
					});
				});
				// this.$refs.uForm.validate().then((res) => {
					  
				// }).catch(errors => {
				// 	// uni.$u.toast('校验失败')
				// })
			}
		},
	};
</script>

<style lang="less" scoped>
.wrap{
	padding: 30rpx;
	.item{
		margin-bottom: 30rpx;
		.title-box{
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
			.del{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #138E57;
			}
		}
		.form{
			background: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 0 30rpx 0 40rpx;
		}
	}

	.btn-box{
		margin-top: 60rpx;
		.btn{
			width: 610rpx;
			height: 80rpx;
			background: #F7F7F7;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			border: 2rpx solid #138E57;
			
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #138E57;
			line-height: 80rpx;
			text-align: center;
			margin: 0 auto;
		}
		.btn2{
			background: linear-gradient( 83deg, #48B453 0%, #2C9F79 100%);
			color: #fff;
			margin-top: 30rpx;
		}
	}
}
</style>